<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>标题</title>
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
    <style>
        #video{
            height: 100%;
            width:100%;
            position: relative;
        }
        .typelist{
            max-height:200px;
            overflow: auto;
        }
        #cou_main{
            margin-top:10px;
        }
        #cou_main a{
            text-decoration: none;
        }
        #cou_main h4{
            white-space:nowrap;
            overflow:hidden;
            text-overflow:ellipsis;
            text-align: center;
            color: #000;
        }
    </style>
</head>
<body>
<nav class="navbar navbar-inverse navbar-static-top">
    <div class="container-fluid">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#head-navbar" aria-expanded="false">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" href="#">Demo</a>
        </div>
        <div class="collapse navbar-collapse" id="head-navbar">
            <ul class="nav navbar-nav">
                {include file="public/nav"}
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<div id="main">
    <div class="container-fluid">
        <div class="row" id="type_main" {notempty name="lists_f"} style="display: none;" {/notempty}>
            <div class="col-sm-12">
                <div class="bs-example" data-example-id="embedded-scrollspy">
                    <nav id="typelist" class="navbar navbar-default navbar-static">
                        <div class="container-fluid">
                            <div class="navbar-header">
                                <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-example-js-navbar-scrollspy">
                                    <span class="sr-only">Toggle navigation</span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                    <span class="icon-bar"></span>
                                </button>
                                <a class="navbar-brand" href="#">全部</a>
                            </div>
                            <div class="collapse navbar-collapse bs-example-js-navbar-scrollspy">
                                <ul class="nav navbar-nav">
                                    {foreach $typelist as $vo}
                                    <li class="dropdown">
                                        <a href="#" id="navtype-{$vo['type']}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{$vo['title']} <span class="caret"></span></a>
                                        <ul class="dropdown-menu" aria-labelledby="navbarDrop1">
                                            {foreach $vo['list'] as $vo2}
                                            <li class=""><a href="#{$vo2['type']}">{$vo2['title']}</a></li>
                                            {/foreach}
                                        </ul>
                                    </li>
                                    {/foreach}
                                </ul>
                            </div>
                        </div>
                    </nav>
                    <div data-spy="scroll" data-target="#typelist" data-offset="170" class="typelist">
                        {foreach $typelist as $vo}
                        <p id="{$vo['type']}"><a href="{:url('demo/jikexueyuan/courses','course='.$vo['type'])}" class="btn btn-info btn-lg">{$vo['title']}</a></p>
                        <p>
                            {foreach $vo['list'] as $vo2}
                            <p id="{$vo2['type']}">
                                <a href="{:url('demo/jikexueyuan/courses','course='.$vo2['type'])}" class="btn btn-default">{$vo2['title']}</a>
                                {foreach $vo2['list'] as $vo3}
                                <a href="{:url('demo/jikexueyuan/courses','course='.$vo3['type'])}" class="btn btn-link">{$vo3['title']}</a>
                                {/foreach}
                            </p>
                            {/foreach}
                        </p>
                        {/foreach}
                    </div>
                </div>
            </div>
        </div>
        <div class="row" id="cou_main">
            {empty name="lists_f"}
            {notempty name="course_f"}
            {include file="jikexueyuan/courses"}
            {/notempty}
            {/empty}
        </div>

        <div class="row">
            <div class="col-md-9" id="video_main">
                {notempty name="video_f"}
                {include file="jikexueyuan/video"}
                {/notempty}
            </div>
            <div class="col-md-3" id="list_main">
                {notempty name="lists_f"}
                {include file="jikexueyuan/lists"}
                {/notempty}
            </div>
        </div>
    </div>
</div>
<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="http://7xjfim.com2.z0.glb.qiniucdn.com/Iva.js"></script>
{js file="/static/demo/jikexueyuan/js/script.js"}
{notempty name="video_f"}
<script>
    play('video');
</script>
{/notempty}
</body>
</html>